<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/ResizeSensor.js"></script>

            <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/jquery-ui.css">

</head>
<body>
    <style>.box {  }; </style>
        <button onclick="downloadCfg()">Save Config</button>
    <div class="box">
                <div id="33a9fd0bd7544a4caf401f4775edf03f" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_33a9fd0bd7544a4caf401f4775edf03f = echarts.init(
            document.getElementById('33a9fd0bd7544a4caf401f4775edf03f'), 'white', {renderer: 'canvas'});
        var option_33a9fd0bd7544a4caf401f4775edf03f = {
    "backgroundColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false),
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "line",
            "name": "\u603b\u4eba\u53e3",
            "connectNulls": false,
            "symbol": "circle",
            "symbolSize": 5,
            "showSymbol": true,
            "smooth": true,
            "step": false,
            "data": [
                [
                    1949,
                    "5.42"
                ],
                [
                    1950,
                    "5.52"
                ],
                [
                    1951,
                    "5.63"
                ],
                [
                    1952,
                    "5.75"
                ],
                [
                    1953,
                    "5.88"
                ],
                [
                    1954,
                    "6.03"
                ],
                [
                    1955,
                    "6.15"
                ],
                [
                    1956,
                    "6.28"
                ],
                [
                    1957,
                    "6.47"
                ],
                [
                    1958,
                    "6.60"
                ],
                [
                    1959,
                    "6.72"
                ],
                [
                    1960,
                    "6.62"
                ],
                [
                    1961,
                    "6.59"
                ],
                [
                    1962,
                    "6.73"
                ],
                [
                    1963,
                    "6.92"
                ],
                [
                    1964,
                    "7.05"
                ],
                [
                    1965,
                    "7.25"
                ],
                [
                    1966,
                    "7.45"
                ],
                [
                    1967,
                    "7.64"
                ],
                [
                    1968,
                    "7.85"
                ],
                [
                    1969,
                    "8.07"
                ],
                [
                    1970,
                    "8.30"
                ],
                [
                    1971,
                    "8.52"
                ],
                [
                    1972,
                    "8.72"
                ],
                [
                    1973,
                    "8.92"
                ],
                [
                    1974,
                    "9.09"
                ],
                [
                    1975,
                    "9.24"
                ],
                [
                    1976,
                    "9.37"
                ],
                [
                    1977,
                    "9.50"
                ],
                [
                    1978,
                    "9.63"
                ],
                [
                    1979,
                    "9.75"
                ],
                [
                    1980,
                    "9.87"
                ],
                [
                    1981,
                    "10.01"
                ],
                [
                    1982,
                    "10.17"
                ],
                [
                    1983,
                    "10.30"
                ],
                [
                    1984,
                    "10.44"
                ],
                [
                    1985,
                    "10.59"
                ],
                [
                    1986,
                    "10.75"
                ],
                [
                    1987,
                    "10.93"
                ],
                [
                    1988,
                    "11.10"
                ],
                [
                    1989,
                    "11.27"
                ],
                [
                    1990,
                    "11.43"
                ],
                [
                    1991,
                    "11.58"
                ],
                [
                    1992,
                    "11.72"
                ],
                [
                    1993,
                    "11.85"
                ],
                [
                    1994,
                    "11.98"
                ],
                [
                    1995,
                    "12.11"
                ],
                [
                    1996,
                    "12.24"
                ],
                [
                    1997,
                    "12.36"
                ],
                [
                    1998,
                    "12.48"
                ],
                [
                    1999,
                    "12.58"
                ],
                [
                    2000,
                    "12.67"
                ],
                [
                    2001,
                    "12.76"
                ],
                [
                    2002,
                    "12.85"
                ],
                [
                    2003,
                    "12.92"
                ],
                [
                    2004,
                    "13.00"
                ],
                [
                    2005,
                    "13.08"
                ],
                [
                    2006,
                    "13.14"
                ],
                [
                    2007,
                    "13.21"
                ],
                [
                    2008,
                    "13.28"
                ],
                [
                    2009,
                    "13.35"
                ],
                [
                    2010,
                    "13.41"
                ],
                [
                    2011,
                    "13.47"
                ],
                [
                    2012,
                    "13.54"
                ],
                [
                    2013,
                    "13.61"
                ],
                [
                    2014,
                    "13.68"
                ],
                [
                    2015,
                    "13.75"
                ],
                [
                    2016,
                    "13.83"
                ],
                [
                    2017,
                    "13.90"
                ],
                [
                    2018,
                    "13.95"
                ],
                [
                    2019,
                    "14.00"
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": false,
                "position": "top",
                "color": "white",
                "margin": 8
            },
            "lineStyle": {
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid",
                "color": "#fff"
            },
            "areaStyle": {
                "opacity": 1,
                "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)
            },
            "markPoint": {
                "label": {
                    "show": true,
                    "position": "inside",
                    "color": "#fff",
                    "margin": 8
                },
                "data": [
                    {
                        "name": "\u65b0\u4e2d\u56fd\u6210\u7acb\uff081949\u5e74\uff09",
                        "coord": [
                            0,
                            "5.42"
                        ],
                        "value": "5.42"
                    },
                    {
                        "name": "\u8ba1\u5212\u751f\u80b2\uff081980\u5e74\uff09",
                        "coord": [
                            31,
                            "9.87"
                        ],
                        "value": "9.87"
                    },
                    {
                        "name": "\u653e\u5f00\u4e8c\u80ce\uff082016\u5e74\uff09",
                        "coord": [
                            67,
                            "13.83"
                        ],
                        "value": "13.83"
                    },
                    {
                        "name": "2019\u5e74",
                        "coord": [
                            70,
                            "14.00"
                        ],
                        "value": "14.00"
                    }
                ]
            },
            "tooltip": {
                "show": false,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "itemStyle": {
                "color": "red",
                "borderColor": "#fff",
                "borderWidth": 1
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u603b\u4eba\u53e3"
            ],
            "selected": {
                "\u603b\u4eba\u53e3": true
            },
            "show": false
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "type": "category",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": false,
                "onZero": true,
                "onZeroAxisIndex": 0
            },
            "axisTick": {
                "show": true,
                "alignWithLabel": false,
                "inside": false,
                "length": 25,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#ffffff63",
                "margin": 30
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "boundaryGap": false,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            },
            "data": null
        }
    ],
    "yAxis": [
        {
            "type": "value",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "width": 0,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            },
            "axisTick": {
                "show": true,
                "alignWithLabel": false,
                "inside": false,
                "length": 15,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#ffffff63",
                "margin": 20
            },
            "inverse": false,
            "position": "left",
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            }
        }
    ],
    "title": [
        {
            "text": "\u65b0\u4e2d\u56fd70\u5e74\u4eba\u53e3\u53d8\u5316(\u4ebf\u4eba)",
            "left": "center",
            "bottom": "5%",
            "textStyle": {
                "color": "#fff",
                "fontSize": 16
            }
        }
    ]
};
        chart_33a9fd0bd7544a4caf401f4775edf03f.setOption(option_33a9fd0bd7544a4caf401f4775edf03f);
    </script>
<br/>                <div id="fe38d633d1314d938304274763d7179c" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_fe38d633d1314d938304274763d7179c = echarts.init(
            document.getElementById('fe38d633d1314d938304274763d7179c'), 'white', {renderer: 'canvas'});
        var option_fe38d633d1314d938304274763d7179c = {
    "backgroundColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false),
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false),
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u524d31\u5e74\uff1a1949-1979",
            "data": [
                "4.34"
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "top",
                "color": "white",
                "margin": 8,
                "fontSize": 16
            }
        },
        {
            "type": "bar",
            "name": "\u540e31\u5e74\uff1a1980-2010",
            "data": [
                "3.65"
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "top",
                "color": "white",
                "margin": 8,
                "fontSize": 16
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u524d31\u5e74\uff1a1949-1979",
                "\u540e31\u5e74\uff1a1980-2010"
            ],
            "selected": {
                "\u524d31\u5e74\uff1a1949-1979": true,
                "\u540e31\u5e74\uff1a1980-2010": true
            },
            "show": false
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": false,
                "onZero": true,
                "onZeroAxisIndex": 0
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                ""
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "width": 0,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            },
            "axisTick": {
                "show": true,
                "alignWithLabel": false,
                "inside": false,
                "length": 15,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#ffffff1f"
                }
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#ffffff63",
                "margin": 20
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "text": "\u8ba1\u5212\u751f\u80b2\u6267\u884c\u524d31\u5e74\uff081949-1979\uff09\u4e0e\u540e31\u5e74\uff081980-2010\uff09\u589e\u52a0\u4eba\u53e3\u603b\u6570\u6bd4\u8f83\uff08\u4ebf\u4eba\uff09",
            "left": "center",
            "bottom": "5%",
            "textStyle": {
                "color": "#fff",
                "fontSize": 16
            }
        }
    ]
};
        chart_fe38d633d1314d938304274763d7179c.setOption(option_fe38d633d1314d938304274763d7179c);
    </script>
<br/>    </div>
    <script>
            $('#33a9fd0bd7544a4caf401f4775edf03f').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#33a9fd0bd7544a4caf401f4775edf03f>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#33a9fd0bd7544a4caf401f4775edf03f'), function() { chart_33a9fd0bd7544a4caf401f4775edf03f.resize()});
            $('#fe38d633d1314d938304274763d7179c').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#fe38d633d1314d938304274763d7179c>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#fe38d633d1314d938304274763d7179c'), function() { chart_fe38d633d1314d938304274763d7179c.resize()});
            var charts_id = ['33a9fd0bd7544a4caf401f4775edf03f','fe38d633d1314d938304274763d7179c'];
function downloadCfg () {
    const fileName = 'chart_config.json'
    let downLink = document.createElement('a')
    downLink.download = fileName

    let result = []
    for(let i=0; i<charts_id.length; i++) {
        chart = $('#'+charts_id[i])
        result.push({
            cid: charts_id[i],
            width: chart.css("width"),
            height: chart.css("height"),
            top: chart.offset().top + "px",
            left: chart.offset().left + "px"
        })
    }

    let blob = new Blob([JSON.stringify(result)])
    downLink.href = URL.createObjectURL(blob)
    document.body.appendChild(downLink)
    downLink.click()
    document.body.removeChild(downLink)
}
    </script>
</body>
</html>
